<template>
  <div>
    <Header>
      <el-button size="small" @click="delAll">批量移除</el-button>
    </Header>
    <Header :type="'screening'" @tag="getList" @reset="reset">
      <div class="head-tit">
        内容筛选
      </div>

      <div class="head-operation">
        <span class="head-label">
          内容搜索：
        </span>
        <el-input
          v-model="search"
          placeholder="请输入内容"
          size="small"
          class="head-select-input"
        >
          <el-select
            slot="prepend"
            v-model="select"
            style="width: 100px;"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in selectOption"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-input>
        <span class="head-label">
          选择行为：
        </span>
        <el-select
          v-model="optionsVal"
          size="small"
          placeholder="请选择"
          class="head-input"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <!-- <span class="head-label">
            订单编码：
          </span>
          <el-select
            v-model="select2"
            size="small"
            placeholder="请选择"
            class="head-input"
          >
            <el-option
              v-for="item in optionList2"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select> -->
      </div>
    </Header>
    <Main
      :data="listData"
      :row-key="getRowKeys"
      :footer-lock="totals > 10"
      @selection-change="handleSelectionChange"
    >
      <el-table-column width="30" :reserve-selection="true" type="selection">
      </el-table-column>
      <el-table-column label="客户头像" fixed min-width="180" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.cover !== 'null'">
            <img
              style="width:40px;height:40px;color:black;"
              :src="
                $store.state.qiniu + scope.row.cover + $store.state.imgRotate
              "
            />
          </span>
          <span v-else>暂无头像</span>
        </template>
      </el-table-column>
      <el-table-column
        label="客户昵称"
        fixed
        min-width="180"
        align="center"
        property="nick_name"
      ></el-table-column>
      <el-table-column
        label="消费金额（元）"
        min-width="180"
        align="center"
        property="totalfee"
      ></el-table-column>
      <el-table-column
        label="消费次数"
        align="center"
        min-width="180"
        property="count"
      ></el-table-column>
      <el-table-column
        label="可用余额（元）"
        align="center"
        min-width="180"
        property="storage"
      ></el-table-column>
      <el-table-column
        label="可用积分"
        min-width="180"
        align="center"
        property="allsign"
      ></el-table-column>
      <el-table-column label="限制行为" min-width="180" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.restrictive_action_order === 1">下单</span>
          <span
            v-if="
              scope.row.restrictive_action_comment === 1 &&
                scope.row.restrictive_action_order === 1
            "
            >、</span
          >
          <span v-if="scope.row.restrictive_action_comment === 1">评论</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="200"
        class-name="tableoperation"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="edit(scope.row)">
            编辑
          </el-button>
          <el-button size="mini" type="text" @click="del(scope.row.member_id)">
            移除
          </el-button>
        </template>
      </el-table-column>
    </Main>
    <Footer :total="totals">
      <el-pagination
        :page-size="10"
        layout="prev, pager, next"
        :total="totals"
        :current-page="pages"
        @current-change="changes"
      >
      </el-pagination>
    </Footer>
    <el-dialog
      title="黑名单限制行为"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-checkbox v-model="restrictiveActionOrder">下单</el-checkbox>
      <el-checkbox v-model="restrictiveActionComment">评论</el-checkbox>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSumbit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  BLACKLIST,
  EDITORDERCOMMENT,
  REMOVEBLACKLIST,
  REMOVEBATCHBLACKLIST
} from "../../service";

export default {
  data() {
    return {
      listData: [],
      totals: 0,
      pages: 1,
      allList: [],
      getRowKeys(row) {
        return row.member_id;
      },
      search: "",
      select: "",
      optionsVal: "all",
      options: [
        { label: "全部行为", value: "all" },
        { label: "下单", value: "order" },
        { label: "评论", value: "comment" }
      ],
      selectOption: [
        { label: "全部", value: "all" },
        { label: "手机号", value: "phone" },
        { label: "微信昵称", value: "nick_name" },
        { label: "会员卡号", value: "card_number" }
      ],
      dialogVisible: false,
      member_id: "",
      restrictiveActionOrder: false,
      restrictiveActionComment: false
    };
  },
  created() {
    this.getList();
  },
  methods: {
    reset() {
      this.search = "";
      this.select = "";
      this.optionsVal = "all";
      this.getList();
    },
    handleSelectionChange(v) {
      this.allList = v;
    },
    async delAll() {
      let arr = [];
      this.allList.forEach(ele => {
        arr.push(ele.member_id);
      });
      await this.$confirm("是否批量删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          REMOVEBATCHBLACKLIST({ member_ids: arr.join(",") }).then(res => {
            let { code, msg } = res;
            if (code === 200) {
              this.getList();
              this.allList = [];
            }
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除!"
          });
        });
    },
    async del(memberId) {
      await this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          REMOVEBLACKLIST({ member_id: memberId }).then(res => {
            let { code, msg } = res;
            if (code === 200) {
              this.getList();
            }
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除!"
          });
        });
    },
    edit(e) {
      this.member_id = e.member_id;
      this.restrictiveActionOrder = e.restrictive_action_order === 1;
      this.restrictiveActionComment = e.restrictive_action_comment === 1;
      this.dialogVisible = true;
    },

    changes(page) {
      this.pages = page;
      this.getList();
    },
    async getList() {
      await BLACKLIST({
        page: this.pages,
        pageshow: 10,
        condition: this.optionsVal,
        filter: this.select,
        search: this.search
      }).then(res => {
        let { code, data } = res;
        if (code === 200) {
          this.listData = data.list;
        } else {
          this.listData = [];
        }
      });
    },
    handleClose() {
      this.member_id = "";
      this.restrictiveActionOrder = false;
      this.restrictiveActionComment = false;
      this.dialogVisible = false;
    },
    async handleSumbit() {
      await EDITORDERCOMMENT({
        member_id: this.member_id,
        restrictive_action_order: this.restrictiveActionOrder ? 1 : 0,
        restrictive_action_comment: this.restrictiveActionComment ? 1 : 0
      }).then(({ code, msg }) => {
        if (code === 200) {
          this.getList();
          this.dialogVisible = false;
        }
        this.$message({
          message: msg,
          type: code === 200 ? "success" : "error"
        });
      });
    }
  }
};
</script>
<style lang="scss" scoped></style>
